<template>
  <div class="mask-layer" v-if="isLoading">
    <div class="container">
      <h2>账号授权查看</h2>
      <vol-form ref="form" :load-key="true" :formFields="formFields" :formRules="formOptions">
        <div style="text-align: center;margin-top: 10px;">
          <div style="margin:-10px 0 5px 0;color:beige">tip:集瑞联合重卡综合管理系统账号</div>
          <el-button type="primary" @click="accountAuthorization">确定</el-button>
        </div>
      </vol-form>
    </div>
  </div>
  <div id="big-data-container" class="big-data-container" style="text-align:center;position: relative;">
    <div class="head">
      <span style="font-size: 36px;color:floralwhite;font-weight: bold;">联合重卡整车回款大屏</span>
      <el-select v-model="current_department" placeholder="部门" @change="department_change"
        style="position: absolute;left:100%;top:50%;transform: translate(-100%,-50%);width:150px">
        <el-option v-for="item in department_select" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="data-container" style="color: floralwhite;">
      <div class="data-head" style="height: 45%; ">
        <div class="data-head-item" style="width: 26%;height:100%;">
          <div class="data-head-item-gdzz"
            style="height: 13%; text-align: center;font-size: 24px; font-weight:550; background-color: #10096a;">付款方式占比
          </div>
          <div class="data-head-item-gdzz2" style="height: 87%;position: relative;">
            <div id="chart-payment" style="width:100%;height:100%;"></div>
            <div
              style="font-size: 20px;font-weight: 400;position: absolute;left:50%;top:100%;transform: translate(-50%,-100%);">
              总计：{{ payment_total }}万元
            </div>
          </div>
        </div>
        <div class="data-head-item" style="width: 37%;height: 100%;">
          <div class="data-head-item-gdzz"
            style="height: 13%; text-align: center;font-size: 24px; font-weight:550; background-color: #10096a;position: relative;">
            每月收款汇总情况
            <el-select v-model="current_year" placeholder="年份" @change="year_change"
              style="position: absolute;left:100%;top:50%;transform: translate(-100%,-50%);width:80px">
              <el-option v-for="item in year_select" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="data-head-item-gdzz2" style="height: 87%; width:100%;">
            <div id="chart-paymentback-month" style="width:100%;height:100%;">
            </div>
          </div>
        </div>
        <div class="data-head-item" style="width: 37%;height: 100%;">
          <div class="data-head-item-gdzz"
            style="height: 13%; text-align: center;padding-top: 4px; font-size: 24px; font-weight:550; background-color: #10096a;">
            款项使用情况</div>
          <div class="data-head-item-gdzz2" style="height: 87%;width:100%">
            <div id="chart-money-use" style="width:100%;height:100%;">
            </div>
          </div>
        </div>
      </div>
      <div id="data-center" style=" margin-top: 10px; height: 55%;">
        <div class="data-center-item"
          style="height: 10%; text-align: center;padding-top: 5px; font-size: 24px; font-weight:550; background-color: #10096a;">
          回款明细数据
        </div>
        <div class="data-center-item" style=" height: 85%;">
          <el-table ref="table" :row-style="changeTableRowStyle" :data="tableData" height="100%" border
            style="width: 100%">
            <el-table-column prop="geT_MONEY_DATE" label="收款日期">
            </el-table-column>
            <el-table-column prop="department" label="所属科室">
            </el-table-column>
            <el-table-column prop="paY_TYPE" label="付款方式">
            </el-table-column>
            <el-table-column prop="money" label="金额(元)">
            </el-table-column>
            <el-table-column prop="fK_NAME" label="付款方名称">
            </el-table-column>
            <el-table-column prop="banK_NAME" label="收款银行">
            </el-table-column>
            <el-table-column prop="dealeR_NAME" label="客户名称">
            </el-table-column>
            <el-table-column prop="paymenT_TYPE" label="款项类型">
            </el-table-column>
            <el-table-column prop="moneY_USE" label="款项用途">
            </el-table-column>
            <el-table-column prop="moneY_SCHEDULE" label="金额明细(元)">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VolForm from "@/components/basic/VolForm.vue";
import axios from 'axios';

var echarts = require("echarts");
let $paymentChart,
  $paymentbackMonthChart,
  $moneyUseChart
import {
  paymentChart,
  paymentbackMonthChart,
  moneyUseChart,
} from "./chart-options.js";
import "./layout.less";
import http from "@/api/http.js";
export default {
  components: {
    VolForm,
  },
  data() {
    var now = new Date();
    return {
      isLoading: true,
      formFields: { "username": "", "password": "", },
      formOptions: [[{ "title": "用户名", "field": "username", "type": "string", }],
      [{ "title": "密码", "field": "password", "type": "password" },],],
      current_department: "汇总",
      current_year: now.getFullYear(),
      department_select: [{ value: '汇总', label: '汇总' }],
      year_select: [],
      payment_total: 0,
      tableData: [],
      userinfo:{"username":"","password":"",}
    }
  },

  created() {
    document.title = "联合重卡整车回款信息大屏";
  },


  mounted() {
    this.getDepartmentInfo();
    this.getYearInfo();
    this.getPaymentInfo(this.current_department);
    this.getPaymentbackMonthInfo(this.current_department, this.current_year);
    this.getMoneyUseInfo(this.current_department);
    this.getPaymentbackSchedule(this.current_department);
  },

  methods: {
    //账号授权
    accountAuthorization() {
      try {
        if (!this.formFields.username) return this.$Message.error('请输入用户名');
        if (!this.formFields.password) return this.$Message.error('请输入密码');
        this.userinfo.username=this.formFields.username;
        this.userinfo.password=this.formFields.password;
        http.post("/api/wholeVheiclePaymentback/accountAuthorization", this.userinfo, '账号检验中...').then((result) => {
          if (result==1) {
            this.isLoading = false;
          }else if(result==0){
            return this.$Message.error('无权查看回款大屏信息');
          }else{
            return this.$Message.error('用户名或密码错误');
          }
        })
      } catch (error) {

      }
    },

    //部门数据
    getDepartmentInfo() {
      let url = "/api/wholeVheiclePaymentback/getDepartmentInfo";
      http.post(url, {}, true).then(s => {
        s.forEach(e => {
          if (e.value == null) {
            e.value = "未确认";
            e.label = "未确认";
          }
          this.department_select.push(e);
        });
      });
    },

    //每月回款，年份数据
    getYearInfo() {
      let url = "/api/wholeVheiclePaymentback/getYearInfo";
      http.post(url, {}, true).then(s => {
        this.year_select.push(...s);
      })
    },

    //付款情况
    getPaymentInfo(department) {
      let url = "/api/wholeVheiclePaymentback/getPaymentInfo?department=" + department;
      http.post(url, {}, true).then((s) => {
        var data = new Array();
        s.forEach((e) => {
          let value = e.money;
          this.payment_total += value - 0;
          let name = e.fU_TYPE;
          data.push({ value, name });
        });
        this.payment_total = this.payment_total.toFixed(2);
        paymentChart.series[0].data.push(...data);
        $paymentChart = echarts.init(document.getElementById('chart-payment'));
        $paymentChart.setOption(paymentChart, true);
      });
    },

    //每月收款汇总情况
    getPaymentbackMonthInfo(department, year) {
      let url = "/api/wholeVheiclePaymentback/getPaymentbackMonthInfo?department=" + department + "&year=" + year;
      http.post(url, {}, true).then((s) => {
        var month = new Array();
        var money = new Array();
        s.forEach((e) => {
          month.push(e.month);
          money.push(e.money);
        });
        paymentbackMonthChart.xAxis[0].data.push(...month);
        paymentbackMonthChart.series[0].data.push(...money);
        $paymentbackMonthChart = echarts.init(document.getElementById("chart-paymentback-month"));
        $paymentbackMonthChart.setOption(paymentbackMonthChart, true);
      });
    },

    //款项用途
    getMoneyUseInfo(department) {
      let url = "/api/wholeVheiclePaymentback/getMoneyUseInfo?department=" + department;
      http.post(url, {}, true).then((s) => {
        var use_name = new Array();
        var money = new Array();
        s.forEach((e) => {
          use_name.push(e.usE_NAME);
          money.push(e.money);
        });
        moneyUseChart.xAxis[0].data.push(...use_name);
        moneyUseChart.series[0].data.push(...money);
        $moneyUseChart = echarts.init(document.getElementById("chart-money-use"));
        $moneyUseChart.setOption(moneyUseChart, true);
      })
    },

    //回款明细
    getPaymentbackSchedule(department) {
      let url = "/api/wholeVheiclePaymentback/getPaymentbackSchedule?department=" + department;
      http.post(url, {}, true).then((s) => {
        this.tableData = s;
      });
    },

    //部门改变
    department_change() {
      this.payment_total = 0;
      paymentChart.series[0].data = [];
      paymentbackMonthChart.xAxis[0].data = [];
      paymentbackMonthChart.series[0].data = [];
      moneyUseChart.xAxis[0].data = [];
      moneyUseChart.series[0].data = [];
      this.tableData = [];
      this.getPaymentInfo(this.current_department);
      this.getPaymentbackMonthInfo(this.current_department, this.current_year);
      this.getMoneyUseInfo(this.current_department);
      this.getPaymentbackSchedule(this.current_department);
    },

    //每月收款汇总，月份改变
    year_change() {
      paymentbackMonthChart.series[0].data = [];
      paymentbackMonthChart.xAxis[0].data = [];
      this.getPaymentbackMonthInfo(this.current_department, this.current_year);
    },

    changeTableRowStyle({ row }) {
      if (row.department == "未确认") {
        return {
          color: "#f00",
        }
      } else {
        return {
          color: "#fff",
        }
      }
    },
  },

  destroyed() {
    $paymentChart = null;
    $paymentbackMonthChart = null;
    $moneyUseChart = null;
    this.tableData = [];
  },
};
</script>

<style>
.mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#111, #000);
  background-size: cover;
  filter: opacity(97%);
  z-index: 200;
}

.mask-layer .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.mask-layer .container h2 {
  color: beige;
  margin-bottom: 15px;
}

.mask-layer .container label {
  color: beige;
}

.data-head>div {
  float: left;
}

.data-head-item {
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.2rem 0.4rem 0.15rem;
  background: rgba(255, 255, 255, 0.04);
  background-size: 100% auto;
  position: relative;
  margin-bottom: 0.15rem;
  z-index: 10;
}

.data-head-item-gdzz {
  text-align: center;
  color: white;
  font-size: 28px;
  position: relative;
  margin-bottom: 0.15rem;
}

.data-center-item {
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.2rem 0.4rem 0.15rem;
  background: rgba(255, 255, 255, 0.04);
  background-size: 100% auto;
  position: relative;
  margin-bottom: 0.15rem;
  z-index: 10;
}

.el-table__cell {
  background-color: #190e52;
  font-size: 15px;
  border: 2.8px #017590 solid;
}

.cell {
  background-color: #190e52;
  font-size: 15px;
}

.el-table th.el-table__cell {
  background-color: #190e52;
  color: #fff;
}

.el-table {
  --el-table-row-hover-bg-color: #190e52;
  /* --el-table-tr-bg-color: #190e52; */
  --el-table-border-color: #017590;
}
</style>